<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>图书借记管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/modules/layer/default/layer.css">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui/xm-select.js"></script>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        .bookShow{
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: space-around;
            align-items: center;
        }
        .bookShow img{
            width: 80%;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .detailImg{
            width: 80%;
        }
        .layui-table-cell{
            text-align:center;
            height: auto;
            white-space: normal;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">图书借记管理系统 @iurac</div>
        <c:if test="${sessionScope.userInfo != null}">
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;" style="font-size: large;color: white;">
                        ${sessionScope.userInfo.username}
                    </a>
                    <dl class="layui-nav-child">
                        <c:if test="${sessionScope.userInfo.role == '用户'}">
                            <dd><a onclick="getBorrowInfo()">借阅信息</a></dd>
                        </c:if>
                        <c:if test="${sessionScope.userInfo.role != '用户'}">
                            <dd><a href="${pageContext.request.contextPath}/toWorkbench.do">进入后台</a></dd>
                        </c:if>
                        <dd><a onclick="showMe()">个人资料</a></dd>
                        <dd><a onclick="editPassword()">修改密码</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/logout.do">退出登录</a></li>
            </ul>
        </c:if>
        <c:if test="${sessionScope.userInfo == null}">
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a href="login.jsp">登录</a></li>
                <li class="layui-nav-item"><a href="register.jsp">注册</a></li>
            </ul>
        </c:if>
    </div>

    <div class="layui-layout-body" style="margin-top: 50px;">
        <!-- 内容主体区域 -->
        <div class="layui-bg-gray" style="padding: 30px;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-panel">
                        <div style="padding: 50px 30px;font-size: xxx-large;font-weight: bold;">图书借记管理系统</div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form">
                        <div class="layui-row">
                            <div class="layui-col-md6 layui-col-md-offset3">
                                <input id="bookInfo" type="text" name="title" autocomplete="off" placeholder="请输入图书相关信息" class="layui-input">
                            </div>
                            <div class="layui-col-md1">
                                <button class="layui-btn" id="searchBtn" lay-filter="formDemo">搜索</button>
                            </div>
                        </div>
                        <br/>
                        <div class="layui-row">
                            <div class="layui-col-md4 layui-col-md-offset4">
                                <div id="bookType" class="xm-select-demo"></div>
                            </div>
                            <div class="layui-col-md2" style="margin-left: 20px">
                                <input id="stock" type="checkbox" checked="checked" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="有库存|无库存">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="flow-default layui-row layui-col-space15" style="padding: 50px" id="LAY_demo1"></ul>
        <p style="color: #7e7e7e;font-size: 10px;text-align: center">图书借记管理系统 @GDPU - Iurac</p>
        <br/>
        <br/>
    </div>

</div>

<script type="text/html" id="book">
</script>
<script>
    layui.use('util', function(){
        var util = layui.util;
        //固定块
        util.fixbar({
            bar1: false
            ,css: {right: 50, bottom: 100}
            ,bgcolor: '#393D49'

        });
    });
    var bookType = xmSelect.render({
        el: '#bookType',
        tips: '类别',
        data: [
            <c:forEach items="${applicationScope.typeList}" var="a">
                {name: '${a.value}',value: '${a.orderNo}', selected: true},
            </c:forEach>
        ]
    })
    //JavaScript代码区域
    layui.use(['flow','element'], function(){
        var flow = layui.flow;
        var element = layui.element;


        loadFlow();
        $("#searchBtn").click(function (){
            $("#LAY_demo1").empty();
            loadFlow();
        });

        function loadFlow(){
            flow.load({
                elem: '#LAY_demo1'
                ,end: "<div class='layui-col-md12' style='text-align: center'>" +
                    "<hr/>" +
                    "<a>已经拉到底啦</a>" +
                    "</div>"
                , done: function (page, next) { //执行下一页的回调
                    var info = $('#bookInfo').val();
                    var type = bookType.getValue('name');
                    var stock = $('#stock').is(":checked");
                    console.log(type);
                    $.ajax({
                        url:"${pageContext.request.contextPath}/book/getBooksByConditionInPage.do",
                        type:"get",
                        data:{
                            "page": page-1,
                            "info": info ,
                            "type": type,
                            "stock": stock
                        },
                        dataType:"json",
                        success:function (data){
                            var lis = [];
                            layui.each(data.books, function(index, item){
                                var index = '';
                                index = item.id;
                                lis.push("<div class='layui-col-md2'>" +
                                    "<div class='layui-panel bookShow' >" +
                                    "<div style='text-align:center;width:90%;font-size: large;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;'>《"+item.title+"》</div>" +
                                    "<img src='/static/image/"+item.img+"' alt='无图片' />" +
                                    "<button type='button' onclick=\"showBook(\'"+index+"\');\" class='layui-btn layui-btn-sm'>查看详情</button>" +
                                    "</div>" +
                                    "</div>");
                            });

                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            next(lis.join(''), data.count === 12);
                        }
                    });
                }
            });
        }

    });
    function showBook(id){
        console.log(id);
        $.ajax({
            url:"${pageContext.request.contextPath}/book/getBooksById.do",
            type:"get",
            data:{
                "id": id,
            },
            dataType:"json",
            success:function (data){
                if(data.success){
                    layer.open({
                        type: 1,
                        area: ['600px', '470px'],
                        shadeClose: true, //点击遮罩关闭
                        title: data.book.title,
                        content: '<div class="layui-row" style="padding:20px;">' +
                            '<div class="layui-col-md5" style="display: flex;align-items: center;flex-direction: column;justify-content: center">' +
                            '<img class="detailImg" id="detail-img" alt="无图片" />' +
                            '<div id="detail-serialNumber" style="margin-top:20px;font-size: small;font-weight: bold;text-decoration-line: underline;"></div>' +
                            '</div>' +
                            '<div class="layui-col-md7 layui-form layui-form-pane">' +
                            '<div class="layui-form-item">' +
                            '    <label class="layui-form-label">图书名</label>' +
                            '    <div class="layui-input-inline">' +
                            '      <input type="text" id="detail-title" class="layui-input" disabled>' +
                            '    </div>' +
                            '  </div>' +
                            '<div class="layui-form-item">' +
                            '    <label class="layui-form-label">出版社</label>' +
                            '    <div class="layui-input-inline">' +
                            '      <input type="text" id="detail-press" class="layui-input" disabled>' +
                            '    </div>' +
                            '  </div>' +
                            '<div class="layui-form-item">' +
                            '    <label class="layui-form-label">作者</label>' +
                            '    <div class="layui-input-inline">' +
                            '      <input type="text" id="detail-author" class="layui-input" disabled>' +
                            '    </div>' +
                            '  </div>' +
                            '<div class="layui-form-item">' +
                            '    <label class="layui-form-label">类别</label>' +
                            '    <div class="layui-input-inline">' +
                            '      <input type="text" id="detail-type" class="layui-input" disabled>' +
                            '    </div>' +
                            '  </div>' +
                            '<div class="layui-form-item">' +
                            '    <label class="layui-form-label">价格</label>' +
                            '    <div class="layui-input-inline">' +
                            '      <input type="text" id="detail-price" class="layui-input" disabled>' +
                            '    </div>' +
                            '  </div>' +
                            '<div class="layui-form-item">' +
                            '    <label class="layui-form-label">库存</label>' +
                            '    <div class="layui-input-inline">' +
                            '      <input type="text" id="detail-stock" class="layui-input" disabled>' +
                            '    </div>' +
                            '  </div>' +
                            '<div class="layui-form-item">' +
                            '    <label class="layui-form-label">位置</label>' +
                            '    <div class="layui-input-inline">' +
                            '      <input type="text" id="detail-location" class="layui-input" disabled>' +
                            '    </div>' +
                            '  </div>' +
                            '</div>' +
                            '</div>' +
                            '</div>',
                        success: function (index, layero){
                            $("#detail-title").val(data.book.title);
                            $("#detail-serialNumber").html(data.book.serialNumber);
                            $("#detail-press").val(data.book.press==null?" ":data.book.press);
                            $("#detail-author").val(data.book.author==null?" ":data.book.author);
                            $("#detail-type").val(data.book.type);
                            $("#detail-price").val(data.book.title);
                            $("#detail-stock").val(data.book.stock-data.book.borrows);
                            $("#detail-location").val(data.book.location==null?" ":data.book.location);
                            $("#detail-img").attr("src","/static/image/"+data.book.img);
                        }
                    });
                }else {
                    layer.msg("找不到该书详情信息");
                }
            }
        });
    }
    function showMe(){
        layer.open({
            type: 1,
            area: ['680px', '360px'],
            shadeClose: true,
            title: "个人信息",
            btn:['修改手机号','取消'],
            content: $("#showMeFrame"),
            success: function (index,layero){
                $.ajax({
                    url:"${pageContext.request.contextPath}/user/getBorrowCountById.do",
                    type:"get",
                    data:{
                        "id": "${sessionScope.userInfo.id}"
                    },
                    dataType:"json",
                    success: function (data){
                        $("#borrows").val(data.count);
                    }
                });
            },
            yes:function (index,layero){
                var phone = $.trim($("#edit-phone").val());
                var oldPhone = $.trim($("#old-phone").val());
                if(phone===oldPhone){
                    layer.msg("新旧手机号一致，不需要修改");
                    layer.close(index);
                    return false;
                }
                var rePhone = /^(13\d|14[579]|15[^4\D]|17[^49\D]|18\d)\d{8}$/;
                if(!(rePhone.test(phone))){
                    layer.msg("请输入正确的手机号码");
                    return false;
                }
                $.ajax({
                    url:"${pageContext.request.contextPath}/user/updatePhone.do",
                    data:{
                        "id" : "${sessionScope.userInfo.id}",
                        "phone" : phone
                    },
                    type:"post",
                    dataType:"json",
                    success:function (n){
                        if(n.success){
                            layer.msg("成功修改手机号为"+phone);
                            $("#old-phone").val(phone)
                            layer.close(index);
                        }else {
                            layer.msg("修改手机号失败");
                        }
                    }
                });
            },
            end: function (res) {
                $("#showMeFrame").css("display",'none');
            }
        });

    }
    function editPassword(){
        layer.open({
            type: 1,
            area: ['600px', '260px'],
            shadeClose: true,
            title: "修改密码",
            btn:['确认','取消'],
            content: $("#editPasswordFrame"),
            success: function (index,layero){
                $("#newPassword").val("");
                $("#confPassword").val("");
            },
            yes:function (index,layero){
                var newPassword = $.trim($("#newPassword").val());
                var confPassword = $.trim($("#confPassword").val());
                if(newPassword===''){
                    layer.msg("请输入新密码");
                    return false;
                }
                if(newPassword!==confPassword){
                    layer.msg("两次密码不一致，请重新输入");
                    return false;
                }
                $.ajax({
                    url:"${pageContext.request.contextPath}/user/updatePassword.do",
                    data:{
                        "id" : "${sessionScope.userInfo.id}",
                        "password" : newPassword
                    },
                    type:"post",
                    dataType:"json",
                    success:function (n){
                        if(n.success){
                            layer.msg("修改密码成功");
                            layer.close(index);
                        }else {
                            layer.msg("修改密码失败");
                        }
                    }
                });
            },
            end: function (res) {
                $("#editPasswordFrame").css("display",'none');
            }
        });

    }
    function getBorrowInfo(){
        layer.open({
            type: 1,
            area: ['700px', '350px'],
            shadeClose: true,
            title: "在借图书",
            content: $("#borrowInfoFrame"),
            success: function (index,layero){
                layui.use(['table','element'], function(){
                    var table = layui.table;
                    var element = layui.element;

                    var tableIns = table.render({
                        elem: '#borrowInfoTable'
                        ,url:'${pageContext.request.contextPath}/borrow/getBorrowByUid.do'
                        ,where: {
                            "userId": "${sessionScope.userInfo.id}"
                        }
                        ,cols: [[
                            ,{field:'id',title: 'ID',hide: true}
                            ,{field:'title', title: '书籍名'}
                            ,{field:'borrowDate', title: '借书日期'}
                            ,{field:'borrowTime', title: '借书时间',width:90}
                            ,{field:'status',title: '状态', templet: function(d){
                                    let now = new Date();
                                    let borrowDate = new Date(d.borrowDate.replace(/-/g,"/"));
                                    let borrowed = now.getTime()-borrowDate.getTime();
                                    let days = Math.floor(borrowed / (24 * 3600 * 1000));
                                    let status = (days/d.borrowTime)*100;
                                    //判断颜色
                                    var color='';
                                    if(70<status && status<100){
                                        color='layui-bg-orange';
                                    }else if(status >= 100){
                                        color='layui-bg-red';
                                    }
                                    return '<div class="layui-progress"><div class="layui-progress-bar '+color+'" lay-percent="'+status+'%"></div></div>'
                                }}
                        ]]
                        ,done: function (res, curr, count) {
                            $(".layui-table-header  tr").resize(function () {
                                $(".layui-table-header  tr").each(function (index, val) {
                                    $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                                });
                            });
                            //初始化高度，使得冻结行表头高度一致
                            $(".layui-table-header  tr").each(function (index, val) {
                                $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                            });
                            //动态监听表体高度变化，冻结行跟着改变高度
                            $(".layui-table-body  tr").resize(function () {
                                $(".layui-table-body  tr").each(function (index, val) {
                                    $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                                });
                            });
                            //初始化高度，使得冻结行表体高度一致
                            $(".layui-table-body      tr").each(function (index, val) {
                                $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                            });
                            element.render()
                        }
                    });
                })
            },
            end: function (res) {
                $("#borrowInfoFrame").css("display",'none');
            }
        });

    }
</script>
</body>
<div style="display:none;" id="showMeFrame">
    <div class="layui-row" style="padding:20px;">
    <div class="layui-col-md12 layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" value="${sessionScope.userInfo.username}" class="layui-input" disabled>
                </div>
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="text" value="${sessionScope.userInfo.sex}" class="layui-input" disabled>
                </div>
            </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline">
                <input type="text" value="${sessionScope.userInfo.account}" class="layui-input" disabled>
                </div>
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <input type="text" value="${sessionScope.userInfo.role}" class="layui-input" disabled>
                </div>
            </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-inline">
                <input type="text" id="edit-phone" value="${sessionScope.userInfo.phone}" class="layui-input">
                <input type="hidden" id="old-phone" value="${sessionScope.userInfo.phone}" class="layui-input">
                </div>
            <label class="layui-form-label">已借图书</label>
            <div class="layui-input-inline">
                <input type="text" id="borrows" class="layui-input" disabled>
                </div>
            </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:175px;">可借图书数量</label>
            <div class="layui-input-inline" style="width:125px;">
                <input type="text" value="${sessionScope.userInfo.borrowBookLimit}" class="layui-input" disabled>
                </div>
            <label class="layui-form-label" style="width:175px;">每次可借天数</label>
            <div class="layui-input-inline" style="width:125px;">
                <input type="text" value="${sessionScope.userInfo.borrowTimeLimit}" class="layui-input" disabled>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="display:none;" id="editPasswordFrame">
    <div class="layui-row" style="padding:20px;">
        <div class="layui-col-md12 layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="password" id="newPassword" class="layui-input" placeholder="请输入新密码" autocomplete="off" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" id="confPassword" class="layui-input" placeholder="请再次输入新密码" autocomplete="off" >
                </div>
            </div>
        </div>
    </div>
</div>
<div style="display:none;" id="borrowInfoFrame">
    <div class="layui-row" style="padding:20px;">
        <table class="layui-hide" id="borrowInfoTable" lay-skin="line" lay-filter="bookTable"></table>
    </div>
</div>
</html>